<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		 div{
			 height: 200px;
			 width: 200px;
			 border-radius: 100px;
			 border: 1px solid red;
			 overflow: hidden;
		 }
		 div:nth-child(1):hover{
			 transform: translate(30px,40px);
		 }
		 div:nth-child(2):hover{
		 			transform: scale(0.2);
				/* 	height: 400px; */
		 }
		  div:nth-child(3){
			  border-radius: 0;
			  border: 2px solid red;
		  }
		 div:nth-child(3):hover{ 
		 	transform: skew(87deg,0);
		 }
		 div:nth-child(4):hover{
		 	transform: rotate(180deg);
		 }
		</style>
	</head>
	<body>
		<div>
			<img src="练习4：当当图书榜/image/book-01.jpg" alt="">
			
		</div>
		<div>
			<img src="练习4：当当图书榜/image/book-01.jpg" alt="">
			
		</div>
		<div>
			<img src="练习4：当当图书榜/image/book-01.jpg" alt="">
			
		</div>
		<div>
			<img src="练习4：当当图书榜/image/book-01.jpg" alt="">
			
		</div>
	</body>
</html>
